這時候雖然每個頁面都已經畫完成了，但如果只是把所有畫面放在一起，其實還不像一個真正可以操作的網站。

例如：

• 點擊「醫師查詢」後會去哪裡？
• 點擊「立即預約」後要怎麼進入登入？
• 登入完成後要回到哪一頁？
• 點擊「取消預約」後，確認視窗要怎麼出現？
• FAQ點擊後，答案要怎麼展開？
• 使用者修改個人資料時，要怎麼從查看狀態切換成編輯狀態？

這些都不是單純的UI設計，而是需要透過Figma Prototype將畫面之間的互動串接起來。

因此這次開始進一步製作網站的Prototype。

一、什麼是Prototype？

Prototype就是在模擬：

使用者實際操作網站時，畫面會怎麼變化。

例如使用者點擊：

首頁->醫師查詢->醫師詳細->立即預約->登入->預約掛號->預約成功

透過Prototype，可以將這些畫面串接起來。

雖然這時候還沒有真正寫程式，但已經可以先模擬使用者操作網站的流程。

二、先從主要預約流程開始

把前面規劃好的預約流程實際串接起來。

原本在User Flow階段規劃的是：

首頁->醫師查詢->醫師詳細資訊->立即預約->登入->預約掛號->預約成功->我的預約->預約詳細資訊

因此我開始將每個頁面的按鈕設定Prototype連結。
例如首頁的「醫師查詢」按鈕，就連接到醫師查詢頁。

醫師列表中的醫師卡片或查看按鈕，則連接到對應的醫師詳細資訊。

在醫師詳細資訊頁點擊「立即預約」後，再進入預約流程。

這樣就可以從首頁一路操作到完成預約。

三、需要登入的頁面怎麼處理？

在實際串接Prototype後，我發現一個問題。
不是所有功能都可以直接進入。

例如「立即預約」需要使用者登入，因此不能單純設定成：

醫師詳細->預約掛號

而是應該模擬實際網站的登入流程：

醫師詳細->立即預約->登入->預約掛號

因此我將需要登入的功能另外設定Prototype流程。

預約掛號

使用者點擊「立即預約」後：

醫師詳細->登入->預約掛號

登入完成後，再回到原本要進行的預約頁面。

我的預約

如果使用者尚未登入就進入「我的預約」，則：

我的預約->登入->我的預約

這樣會比直接進入我的預約頁更加符合實際網站的操作情境。

透過這次Prototype，我也發現：

Prototype不只是把按鈕連到下一頁，而是需要思考使用者在什麼情況下才能進行下一個操作。

四、取消預約：第一次使用Overlay

除了普通的頁面跳轉之外，醫院網站還有一些操作不適合直接跳到另一個頁面。

其中一個例子就是：

取消預約。

使用者點擊「取消預約」後，我不希望直接跳到一個新的頁面，而是希望先讓使用者確認：

取消預約->確認視窗

因此我使用Figma Prototype的 Open Overlay 。

設定：

Action:Open overlay

Position:Center

點擊「取消預約」後，就會在目前頁面的上方顯示確認視窗。

這樣使用者不需要離開目前的預約詳細頁，就可以先確認是否真的要取消。

五、取消成功：使用Swap Overlay串接下一個狀態

接著又遇到另一個問題。
如果使用者在確認視窗中點擊「確認取消」，下一步應該顯示：

取消預約成功

因此我使用Figma Prototype的Swap Overlay。

操作流程變成：

預約詳細頁->取消預約->Open Overlay->取消預約確認視窗->Swap Overlay->取消成功提示

這樣就可以把兩個Overlay串接起來。

第一次實際操作時，我才發現Prototype不只是「連下一頁」，還需要根據不同情境選擇適合的互動方式。

例如:

六、FAQ：讓內容可以展開與收合

另一個我覺得很適合用Prototype呈現的功能，就是「就醫資訊」中的 FAQ。

FAQ 的操作方式很簡單：

點擊之後：

再次操作後又可以收合。

一開始我原本以為只要複製很多個FAQ就可以完成。
但實際製作後發現，如果每個FAQ都要重新設定互動，會變得非常麻煩。
因此我將FAQ做成可以重複使用的Component，再利用不同狀態來處理展開與收合。

製作方法

首先建立FAQ的兩個狀態：

FAQ

• 收合
• 展開

接著透過Variant建立兩種狀態。

Prototype則使用：

Change to

讓使用者點擊FAQ後，從一個Variant切換到另一個Variant。

概念大致是：

點擊收合->Change to->展開

再搭配Smart Animate，讓展開與收合的變化更加自然。

最後就可以做出FAQ收合動畫。

這次實際製作FAQ後，也讓我更清楚理解前一天學到的Component與ariant，原來不只是用來整理UI，也可以搭配Prototype做互動。

七、公告分頁：重新思考 Prototype 的複雜度

除了FAQ之外，首頁的「最新公告」也遇到一個Prototype設計問題。

原本我的設計是：

最新公告->查看全部->公告列表頁

但是實際開始製作Prototype後，我發現如果真的按照這個方式做，就需要再製作一個新的公告列表頁，這會增加Prototype的製作量。

因此我重新思考：

這個功能真的需要另外建立一個頁面嗎？

最後將「查看全部」改成：

1 2 3

讓使用者可以直接切換不同公告內容。

這樣就不需要額外建立公告列表頁，也讓Prototype的操作流程更加簡單。

這次讓我了解到：

Prototype 不一定要完全照著最初的想法製作，而是可以在實際操作後，再重新檢視流程是否合理。

八、Footer不需要全部都能點

在串接各個頁面時，我也遇到Footer的問題。

一開始會思考：

Footer裡面的每一段文字是不是都應該設定Prototype？

後來發現其實不需要。

例如:地址、電話，這些資訊主要是提供使用者閱讀，不一定需要設定成互動元素。

而如果是：回首頁、最新消息、就醫資訊，這類具有明確導向功能的內容，才需要設定Prototype。

因此我最後以：

「使用者實際操作時是否會需要點擊？」

作為判斷依據。
避免為了讓畫面看起來「可以點」，而把所有文字都設定成互動元素。

九、登出確認視窗

完成主要頁面串接後，我又進一步處理使用者登出的流程。
使用者可以從導覽列的使用者選單或個人檔案頁進行登出。

點擊「登出」後，不直接離開，而是先顯示確認視窗：

登出 -> 確認視窗->確認登出

這樣可以避免使用者不小心點擊登出。

這裡同樣運用了前面取消預約時學到的Overlay概念。

不過在製作過程中也遇到一個問題：

因為使用者名稱下拉選單本身是使用獨立Frame製作，直接串接Prototype時，無法像取消預約的Overlay一樣保留原本頁面作為背景。

因此目前先將Prototype重點放在操作流程的呈現，真正的登入狀態與登出邏輯，則留到後續程式開發階段處理。

十、個人檔案

這個頁面有兩種狀態：

Profile

• View
• Edit

使用者進入頁面時，先看到自己的個人資料。

點擊「編輯資料」後，則切換到編輯狀態。

這裡使用前面建立的Variant，讓查看與編輯兩種狀態可以在同一組Component中切換。

因此不需要另外製作一個完整的編輯頁面。

這個功能也讓我實際感受到：

Component負責整理共用結構，Variant負責不同狀態，而Prototype則負責讓這些狀態真正互動起來。

十一、固定導覽列

除了頁面切換之外，我也希望網站的導覽列在使用者往下滑動時，可以一直停留在頁面上方。
因此使用Figma Prototype中的 Fixed 設定。

將導覽列設定為固定位置後，就可以模擬實際網站中常見的固定式Navbar。

另外也加入透明玻璃效果，讓導覽列固定在頁面上方時，不會破壞原本的UI視覺。

十二、把整個預約流程串起來

完成不同互動功能後，最後再把主要頁面串接起來。

整體預約流程變成：

首頁->醫師查詢->醫師詳細資訊->立即預約->登入->預約掛號->預約成功->我的預約
->預約詳細資訊->取消預約->確認視窗->取消成功

這時候再實際操作Prototype，就可以從頭到尾模擬一次使用者的操作流程。

也可以檢查：

• 哪個按鈕沒有連結
• 哪個頁面跳錯地方
• 哪個操作流程不合理
• 是否需要新增畫面
• 是否可以用Overlay或Variant簡化操作

因此Prototype其實也變成另一種「測試設計」的方式。

十三、Prototype過程中遇到的問題

實際開始製作Prototype後，我發現真正困難的地方不是「怎麼把畫面連起來」，而是：

要怎麼判斷不同情境應該使用哪一種互動方式？

1.有些功能不適合直接跳轉頁面

例如「取消預約」只是需要使用者確認是否要取消，如果直接跳到另一個頁面，操作流程會比較複雜。

因此需要思考：

這個功能是真的需要換頁，還是只需要在目前頁面顯示提示？

2.FAQ的展開與收合需要不同狀態

FAQ不是點擊後直接跳到另一個頁面，而是同一個問題需要在「收合」與「展開」之間切換。
如果每一個FAQ都個別製作，會增加很多重複的設定。
因此需要思考如何利用前面建立的Component與Variant來處理。

3.一個登入頁無法連接多個頁面

網站中有很多頁面都需要先進入登入頁，登入完成後再回到原本的頁面。
但如果所有頁面都共用同一個登入頁，在設定Prototype連結時會產生衝突，無法讓同一個登入頁分別連回不同的原始頁面。

十四、解決方式

1.使用Overlay處理確認視窗

取消預約不另外建立一個完整頁面，而是使用：

Open Overlay

讓確認視窗直接出現在目前頁面中央。

操作流程為：

取消預約->Open Overlay->確認取消預約？

使用者確認後，再使用：

Swap Overlay

將確認視窗切換成取消成功提示。
這樣可以讓操作流程更加簡單。

2.使用Overlay處理確認視窗

FAQ先建立成Component，再利用Variant建立：

FAQ

• 收合
• 展開

接著使用Prototype中的：

Change to + Smart Animate

讓使用者點擊問題後，可以從收合狀態切換到展開狀態。
這樣就不需要為每個FAQ重新製作一套互動。

3.複製登入頁

將登入頁複製成多個版本，讓不同的頁面各自連接到對應的登入頁。

例如：

• 醫師詳細頁 ->登入頁 A -> 預約掛號頁
• 我的預約 -> 登入頁 B -> 我的預約頁
• 其他需要登入的功能 -> 對應的登入頁 -> 原本的功能頁面

透過複製登入頁的方式，可以讓不同頁面的Prototype流程分開設定，避免多個連結互相衝突，也能讓整體操作流程更符合實際使用情境。

十五、今日成果

智慧醫院管理平台｜Prototype展示

十六、今日學習

這次主要學習到：

• 了解Figma Prototype的基本使用方式
• 學習頁面之間的Prototype串接
• 學習Navigate的使用方式
• 學習Open Overlay
• 學習Swap Overlay
• 學習Variant搭配Change to
• 學習使用Smart Animate製作狀態切換
• 學習Fixed固定導覽列
• 學習依照使用者流程規劃Prototype
• 了解不同互動情境應該選擇不同的Figma功能

這次最大的收穫是，我發現Prototype不只是「把按鈕連到下一頁」。

真正開始操作之後，才會發現很多原本在靜態 UI 中看不出來的問題，例如登入流程、確認視窗、狀態切換，以及頁面數量是否過多。

因此Prototype也可以當成正式開發前的一次操作流程檢查。

十七、AI協助

這次主要透過AI協助釐清Figma Prototype的操作方式。

遇到問題時，我會先自己操作並確認問題，再整理目前的設計需求與遇到的狀況詢問AI。

例如：

*　Open Overlay要怎麼使用？
*　Overlay之間要怎麼切換？
*　FAQ的展開收合應該怎麼製作？
*　Variant與Prototype要怎麼搭配？
*　固定式導覽列要如何設定？
*　登入後應該如何回到原本頁面？

AI主要協助我理解不同Figma功能的使用方式，但最後還是會依照實際專案需求判斷是否採用。

這次也讓我比較能理解：

不是知道一個功能怎麼用就好，而是要知道什麼情況適合使用這個功能。